<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/ol4/ol4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map" style="width: 100%"></div>
<script>

    const projection = ol.proj.get('EPSG:4326');
    // projection.setExtent([-180.00000000000003, -85.05112877980652, 180.00000000000003, 85.05112877980646]);
    const tileSize = 256;
    const projectionExtent = projection.getExtent();
    const origins = [
        [-180.0, 90.0],
        ol.extent.getTopLeft(projectionExtent)
    ];
    const origin = origins[1];
    console.log('origin:', origin);

    const size = ol.extent.getWidth(projectionExtent) / tileSize;

    const resolutions = [2.7922764150666654E8, 1.3961382075333327E8, 6.980691037666664E7, 3.490345518833332E7, 1.745172759416666E7, 8725863.79708333, 4362931.898541665, 2181465.949270837, 1090732.9746354138, 545366.4873177079, 272683.2436588544, 136341.62182942673, 68170.81091471355, 34085.405457356734, 17042.702728678414, 8521.351364339187, 4260.675682169598, 2130.3378410847945, 1065.168920542402, 532.5844602711991];
    const matrixIds = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
    //
    const url = `https://ditu.zjzwfw.gov.cn/mapserver/vmap/zjvmap/getMAP?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017`
    const openStreetMapLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
            url
        })
    });

    // 创建地图
    const map = new ol.Map({
        layers: [
            openStreetMapLayer
        ],
        view: new ol.View({
            // 设置成都为地图中心
            center: [120.15, 30.268],
            projection: 'EPSG:4326',
            resolutions,
            zoom: 10
        }),
        target: 'map'
    });
</script>
</body>
</html>